<template>
  <div class="CameraOnMap">
    <div class="CameraOnMap--img" @click.stop="showDetail">
      <img src="@/assets/images/armyScreen/上图预警1@2x.png"/>
      <img src="@/assets/images/armyScreen/上图预警底部闪烁光标@2x.png"/>
      <!--<img src="@/assets/images/armyScreen/上图预警_card_bg@2x.png"/>-->
    </div>
    <div class="CameraOnMap--info">
      <div class="CameraOnMap--info__title one-line">
        XXXXXXXXXXXXXXXXXXXXXXXXX故障XXXXXXXXXXXXXXXXXXXXXXXXX故障…
      </div>
      <div class="CameraOnMap--info__location">
        营区东门1号入口入营区东门1号入口入入口入…
      </div>
      <div class="CameraOnMap--info__date">
        2021-11-04 00:37:25
      </div>
      <div class="CameraOnMap--info__close" @click.stop="closeAction"></div>
    </div>
  </div>
</template>

<script setup>
const $emit  = defineEmits(['close'])

function showDetail() {
  console.log('showDetail')
}

function closeAction () {
  console.log("$emit('close')")
  $emit('close')
}

</script>

<style lang="scss" scoped>
.CameraOnMap {
  position: absolute;
  left: -27px;
  top: -60px;

  &--img {
    cursor: pointer;
    text-align: center;
    position: absolute;
    left: -66px;
    top: -16px;

    img:first-child {
      width: 119px;
      height: 82px;
    }

    img:nth-child(2) {
      width: 185px;
      height: 68px;
      position: relative;
      top: -32px;
      animation: go 2s infinite; /*引用动画*/
      animation-direction: alternate;
    }
  }

  &--info {
    background-image: url("@/assets/images/armyScreen/上图预警_card_bg@2x.png");
    background-size: cover;
    width: 380px;
    height: 110px;
    position: absolute;
    top: -124px;
    left: -165px;
    padding: 18px 21px;

    &__title {
      width: 327px;
      font-family: PingFangSC-Semibold;
      font-size: 16px;
      color: #E2FFFF;
      letter-spacing: 0;
      font-weight: 600;
      margin-bottom: 8px;
    }

    &__location {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #FFFFFF;
      letter-spacing: 0;
      font-weight: 400;

      &::before {
        content: '';
        display: inline-block;
        position: relative;
        width: 16px;
        height: 16px;
        background-image: url("@/assets/images/armyScreen/门禁记录_地址@2x.png");
        background-size: cover;
        margin-right: 4px;
        top: 3px;
      }
    }

    &__date {
      opacity: 0.85;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #FFFFFF;
      letter-spacing: 0;
      font-weight: 400;
      line-height: 32px;

      &::before {
        content: '';
        display: inline-block;
        position: relative;
        width: 16px;
        height: 16px;
        background-image: url("@/assets/images/armyScreen/门禁记录_时间@2x.png");
        background-size: cover;
        margin-right: 4px;
        top: 3px;
      }
    }

    &__close {
      width: 24px;
      height: 24px;
      position: absolute;
      right: 3px;
      top: 3px;
      color: #0DFDF0;
      cursor: pointer;
    }
  }
}
</style>
<style>
/*@keyframes go {}  定义动画*/
@keyframes go {
  0% { /*起始位置，等价于 form*/
    transform: scale(0.5);
  }
  100% {
    transform: scale(1); /*100% 相当于结束位置 to*/
  }
}
</style>
